import React from "react";
import {Color} from "../../utils/baseColor";
import {fetchPosts, reset} from "../../actions";
import {connect} from "react-redux";
import ShopName from "../../components/ShopName";
import cookie from "react-cookie";
class quickResponseCode extends React.Component {
    //1,添加员工成功二维码展示 /pay/quickResponseCode?qrCode=""&qrCodeType=1&shopNo=""
    //2,商户收款二维码展示 /pay/quickResponseCode?qrCodeType=2
    //3,重复邀请二维码展示 /pay/quickResponseCode?qrCodeType=1&shopNo=""&bindingId=""
    constructor(props) {
        super(props);
        this.state = {
            qrCode: '',//二维码图片链接
            qrCodeType: 0,//页面展示类型(1,2)
            shopNo: 0,
            staffType: 0,
            shopNames: [],
            isLoading: true,
            shopName: ""
        };
    }

    componentWillMount() {
        document.body.style.background = Color.BACKGROUND_DEFAULT;
        const query = this.props.location.query;
        if (query.qrCode) {
            this.setState({qrCode: query.qrCode,isLoading:false});
        }
        this.setState({staffType: query.staffType});
        if (query.shopNo) {
            this.setState({shopNo: query.shopNo});
        }
        this.setState({qrCodeType: query.qrCodeType});
        if (query.qrCodeType == 1) {
            document.title = "邀请员工确认";
        } else if (query.qrCodeType == 2) {
            document.title = "收款二维码";
        }
    }

    componentDidMount() {
        const query = this.props.location.query;
        if (this.state.qrCodeType == 2) {
            this.getShopQrCode("");
        }else if (this.state.qrCodeType == 1 && query.bindingId){
            this.getRepetitionInviteQrCode();
        }
    }


    componentWillReceiveProps(nextProps) {
        if (nextProps.ShopPayQrCode.errorCode === 0) {
            this.setState({
                isLoading: false
            });
            let shopPayQrCode = nextProps.ShopPayQrCode.data;
            let shopNames = shopPayQrCode.shopInfoForStaffVos;
            if (shopNames.length > 0) {
                this.setState({
                    shopNames: shopNames,
                    shopName: shopNames[0].shopName
                });
            }
            this.setState({
                qrCode: shopPayQrCode.payQrCode
            });
        }
        if (nextProps.RelationshipAgain.errorCode === 0) {
            this.setState({isLoading: false});
            this.setState({qrCode: nextProps.RelationshipAgain.data});
        }
    }

    againAddEmployee() {
        window.location.href = "/#/pay/addEmployee?shopNo=" + this.state.shopNo;
    }

    seeAddedEmployee() {
        window.location.href = "/#/pay/managementStaff?shopNo=" + this.state.shopNo;
    }

    getShopQrCode(shopNo) {
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("getShopPayQrCode"));
        this.props.dispatch(fetchPosts("getShopPayQrCode", header, {
            openId: cookie.load("openId"),
            shopNo: shopNo
        }));
    }

    getRepetitionInviteQrCode(){
        const query = this.props.location.query;
        const header = {"X-Client-ID": "123456"};
        this.props.dispatch(reset("createRelationshipAgain"));
        this.props.dispatch(fetchPosts("createRelationshipAgain", header, {bindingId: query.bindingId}))
    }
    chooseQrCodeType() {
        if (this.state.qrCodeType == 1) {
            return (
                <div>
                    <div className="quickResponseCode-up">
                        <div className="quickResponseCode">
                            <img width="200" height="200" src={this.state.qrCode}/>
                            <p className="quickResponseCode-p">邀请员工确认加入商铺！</p>
                        </div>
                    </div>
                    <div className="p-prompt-two">
                        <div>
                            <p className="p-prompt-title">邀请确认方式：</p>
                        </div>
                        <p>1.面对面邀请员工扫以上二维码绑定；</p>
                        <p>2.长按二维码保存图发送给员工，员工识别二维码确认</p>
                        <p>3.右上角...选择“分享给朋友”</p>
                        <div className="p-prompt-three">
                            <p>温馨提示:提醒员工关注“叮叮来钱”公众号</p>
                        </div>
                    </div>
                    <div className="quickResponseCode-btn">
                        <button className="quickResponseCode-btn-one" onClick={this.againAddEmployee.bind(this)}>
                            继续添加员工
                        </button>
                        <button className="quickResponseCode-btn-two" onClick={this.seeAddedEmployee.bind(this)}>
                            查看已添加员工
                        </button>
                    </div>
                </div>
            )
        } else if (this.state.qrCodeType == 2) {
            if (this.state.isLoading) {
                return (<div className="loading"><span>Loading</span></div>);
            } else {
                return (
                    <div>
                        <ShopName shopNames={this.state.shopNames}
                                  shopNo={this.state.shopNo}
                                  fetchDataByShopId={this.fetchDataByShopId.bind(this)}
                        />
                        <div className="quickResponseCode">
                            <img width="200" height="200" src={this.state.qrCode}/>
                            <div className="quickResponseCode-shopName">
                                <p className="quickResponseCode-shopName-one-p">( <span>{this.state.shopName}</span>)
                                </p>
                                <p className="quickResponseCode-shopName-two-p">扫二维码向我付钱</p>
                                <p className="quickResponseCode-shopName-three-p">温馨提示：长按收款二维码，可保存在相册，打印贴纸来收款</p>
                            </div>
                        </div>
                    </div>
                )
            }
        }
    }


    render() {
        if (this.state.isLoading) {
            return (<div className="loading"><span>loading</span></div>)
        } else {
            return (
                <div>
                    {this.chooseQrCodeType()}
                </div>
            );
        }
    }

    fetchDataByShopId(shopNo) {
        this.setState({
            shopNo: shopNo
        });
        this.state.shopNames.map((item) => {
            if (item.shopNo == shopNo) {
                this.setState({
                    shopName: item.shopName
                });
            }
        });
        this.getShopQrCode(shopNo);
    }
}

function mapStateToProps(state) {
    const {postsByApi} = state;
    const {
        isFetching,
        items: ShopPayQrCode
    } = postsByApi["getShopPayQrCode"] || {
        isFetching: false,
        items: {}
    };
    const {
        items:RelationshipAgain
    } = postsByApi["createRelationshipAgain"] || {
        isFetching,
        items: {}
    };
    return {
        RelationshipAgain,
        ShopPayQrCode,
        isFetching
    }
}


export default connect(mapStateToProps)(quickResponseCode);